<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- cornerstone css - provides some useful css classes -->
    <link href="../../dist/cornerstone.css" rel="stylesheet">

</head>
<body>
<div class="container">

<h1>
    zoompan/index.html
</h1>

This is an example of interactive zoom and pan

<br>
<br>

In this example, the zoom can be changed via the mouse wheel or the buttons on the screen.
Panning is done via left mouse click dragging.  Note that the core cornerstone library does
not specify any interaction paradigm and allows any interaction paradigm to be implemented
by the developer
<br>
<br>


<div id="dicomImage" style="width:512px;height:512px"
     class="cornerstone-enabled-image"
     oncontextmenu="return false"
     unselectable='on'
     onselectstart='return false;'
     onmousedown='return false;'>
</div>

<button id="zoomIn" type="button" class="btn btn-default">Zoom In</button>
<button id="zoomOut" type="button" class="btn btn-default">Zoom Out</button>
<button id="reset" type="button" class="btn btn-default">Reset</button>

</div>
</body>

<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<script>
    $(document).ready(function() {

        // image enable the dicomImage element
        var element = $('#dicomImage').get(0);
        cornerstone.enable(element);

        //load the image and display it
        var imageId = 'example://1';
        cornerstone.loadImage(imageId).then(function(image) {
            cornerstone.displayImage(element, image);
        });

        // Add event handlers to zoom the image in and out
        $('#zoomIn').click(function (e) {
            var viewport = cornerstone.getViewport(element);
            viewport.scale += 0.25;
            cornerstone.setViewport(element, viewport);
        });
        $('#zoomOut').click(function (e) {
            var viewport = cornerstone.getViewport(element);
            viewport.scale -= 0.25;
            cornerstone.setViewport(element, viewport);
        });
        $('#reset').click(function (e) {
            cornerstone.reset(element);
        });

        // add event handlers to pan image on mouse move
        $('#dicomImage').mousedown(function (e) {
            var lastX = e.pageX;
            var lastY = e.pageY;


            $(document).mousemove(function (e) {
                var deltaX = e.pageX - lastX,
                        deltaY = e.pageY - lastY;
                lastX = e.pageX;
                lastY = e.pageY;

                var viewport = cornerstone.getViewport(element);
                viewport.translation.x += (deltaX / viewport.scale);
                viewport.translation.y += (deltaY / viewport.scale);
                cornerstone.setViewport(element, viewport);
            });

            $(document).mouseup(function (e) {
                $(document).unbind('mousemove');
                $(document).unbind('mouseup');
            });
        });

        $('#dicomImage').on('mousewheel DOMMouseScroll', function (e) {
            // Firefox e.originalEvent.detail > 0 scroll back, < 0 scroll forward
            // chrome/safari e.originalEvent.wheelDelta < 0 scroll back, > 0 scroll forward
            if (e.originalEvent.wheelDelta < 0 || e.originalEvent.detail > 0) {
                var viewport = cornerstone.getViewport(element);
                viewport.scale -= 0.25;
                cornerstone.setViewport(element, viewport);
            } else {
                var viewport = cornerstone.getViewport(element);
                viewport.scale += 0.25;
                cornerstone.setViewport(element, viewport);
            }
            //prevent page fom scrolling
            return false;
        });
    });

</script>
</html>
